<?php use_javascript('/gallery/js/jquery.galleriffic.js');
use_javascript('/gallery/js/jquery.history.js');
use_javascript('/gallery/js/jquery.opacityrollover.js');
use_javascript('/gallery/js/jush.js');
//use_stylesheet('/gallery/css/basic.css');

use_stylesheet('/gallery/css/galleriffic-2.css');
include_stylesheets();
include_javascripts(); ?>

<script type='text/javascript'>
jQuery(document).ready(function($) {

	// We only want these styles applied when javascript is enabled
	$('div.navigation').css({'width' : '348px', 'float' : 'left'});    
	$('div.content').css('display', 'block');

	// Initially set opacity on thumbs and add
	// additional styling for hover effect on thumbs
	var onMouseOutOpacity = 0.67;
	$('#thumbs ul.thumbs li').opacityrollover({
		mouseOutOpacity:   onMouseOutOpacity,
		mouseOverOpacity:  1.0,
		fadeSpeed:         'fast',
		exemptionSelector: '.selected'
	});
	
	var gallery = $('#thumbs').galleriffic({
		delay:                     2500,
		numThumbs:                 18,
		preloadAhead:              10,
		enableTopPager:            true,
		enableBottomPager:         true,
		maxPagesToShow:            7,
		imageContainerSel:         '#slideshow',
		controlsContainerSel:      '#controls',
		captionContainerSel:       '#caption',
		loadingContainerSel:       '#loading',
		renderSSControls:          true,
		renderNavControls:         true,
		playLinkText:              'Слайдшоу',
		pauseLinkText:             'Пауза',
		prevLinkText:              '&lsaquo; Предыдущее фото',
		nextLinkText:              'Следующее фото &rsaquo;',
		nextPageLinkText:          'Дальше &rsaquo;',
		prevPageLinkText:          '&lsaquo; Назад',
		enableHistory:             false,
		autoStart:                 false,
		syncTransitions:           true,
		defaultTransitionDuration: 900,
		onSlideChange:             function(prevIndex, nextIndex) {
			// 'this' refers to the gallery, which is an extension of $('#thumbs')
			this.find('ul.thumbs').children()
				.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
				.eq(nextIndex).fadeTo('fast', 1.0);
		},
		onPageTransitionOut:       function(callback) {
			this.fadeTo('fast', 0.0, callback);
		},
		onPageTransitionIn:        function() {
			this.fadeTo('fast', 1.0);
		}
    });
    
$("#thumbs").show();
});
</script>
<h2 class='nika_page_title'>Наша Галерея</h2>
<hr>
<div class="gallerymenu"><?php echo link_to('Галерея','media/index'); ?> / <?php if($sf_user->isAuthenticated()) echo link_to('Мои альбомы /','media/showmyalbums') ; ?>  <?php echo $album['title'] ?></div>
<br /><br /><br />

<div id="gallery" class="content" style="float:left" >
<div id="controls" class="controls"></div>
<div class="slideshow-container">
<div id="loading" class="loader"></div>
<div id="slideshow" class="slideshow"></div>
</div>
<div id="caption" class="caption-container"></div>
</div>

<div id="thumbs" style="width:348px;display:none" class="navigation">
<ul class="thumbs noscript">
<?php foreach ($allmedias as $photo) { ?>
	<li><a class="thumb" name="1"
		href="/uploads/media/thumbnail_480_480_p/<?php echo $photo['image'] ?>"
		title="<?php echo $photo['title'] ?>"> <img
		src="/uploads/media/thumbnail_100_100_s/<?php echo $photo['image'] ?>"
		alt="<?php echo $photo['title'] ?>" /></a>
	<div class="caption"><?php include_component('comment','showlist',array('entity_id'=>$photo['id'],'entity_type'=>'media')) ?></div>
	</li>
	<?php } ?>
</ul>
</div>